<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-class伪类属性说明</title>
    <style>

        #parent {
            text-align: center;
        }

        /*
        功能:
            1. 使用伪类选中第一个子元素.
        */
        #parent p:first-child {
            color: yellow;
        }

        /*
        功能:
            1. 使用伪类选中最后一个子元素.
        */
        #parent p:last-child {
            color: red;
        }

        p {
            margin: 10px;
            display: inline;
        }



    </style>
</head>
<body>
<div id="parent">
    <p>First w3cschool</p>
    <p>Second W3cschool</p>
    <p>Third w3cSchool</p>
    <p>Fourth W3cSchool</p>
</div>
</body>
</html>